<template>
  <view class="list_row" @click="pageUrl">
    <view class="info">
      <!-- <image class="logo" v-if="showLogo==1" mode="aspectFit" :src="logo"></image> -->
      <image
        class="buy"
        @click.stop="showCart"
        src="/static/image/addcart.svg"
      ></image>
      <image class="img" mode="aspectFit" :src="data.img"></image>
      <view class="name_box">
        <view class="name">{{ data.name }}</view>
        <view class="tags" v-if="data.datum.length > 0">
          <view class="tag" v-for="(y, index) in data.datum" :key="index">{{
            y.title
          }}</view>
        </view>
      </view>
      <text class="gray_font desc">{{
        data.spu.length == 1 ? data.spu[0].describe || "" : ""
      }}</text>
      <!-- <view><text class="red_font" v-show="showPrice">￥{{data.showPrice}}<text v-if="data.spu.length==1" style="font-size:20rpx;"> /{{data.spu[0].unit}}</text></text></view> -->
      <view
        ><text class="red_fonts" v-show="showPrice"
          >{{ data.showPrice
          }}<text
            v-if="data.spu.length == 1 && data.spu[0].current_price == 0"
            style="font-size: 24rpx"
          >
            /{{ data.spu[0].unit }}</text
          ></text
        ></view
      >
    </view>
  </view>
</template>

<script>
export default {
  props: ["data", "showPrice"],
  data() {
    return {
      logo: "",
      showLogo: 0,
    };
  },
  mounted() {
    this.logo = uni.getStorageSync("logo");
    this.showLogo = uni.getStorageSync("showLogo");
  },
  methods: {
    showCart() {
      this.$emit("showCart");
    },
    pageUrl() {
      uni.navigateTo({
        url: `../../subindex/index/shopdetail?id=${this.data.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list_row {
  min-height: 340rpx;
  background: $white;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 4rpx rgba(215, 239, 231, 0.5);
	padding-bottom: 20rpx;

  .logo {
    height: 40rpx;
  }

  .info {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > view + view {
      margin-top: 10rpx;
    }

    .logo {
      position: absolute;
      left: 10rpx;
      top: 10rpx;
      width: 48rpx;
      height: 48rpx;
    }

    .buy {
      position: absolute;
      right: 12rpx;
      bottom: 12rpx;
      width: 55rpx;
      height: 55rpx;
			z-index: 1;
    }

    .img {
      width: 360rpx;
      height: 360rpx;
    }
    .name_box {
      margin-bottom: 8rpx;
      padding: 20rpx 20rpx 0 20rpx;
      .tags {
        display: inline-flex;
        .tag {
          padding: 0 12rpx;
          background: red;
          color: #fff;
          border-radius: 6rpx;
          font-size: 24rpx;
          margin-right: 4rpx;
        }
      }
      .name {
        font-size: 26rpx;
        color: #666;
        margin: 20rpx 0 8rpx;
        font-weight: bold;
      }
    }

    .red_fonts {
      margin: 8rpx 20rpx 0;
			color: red;
			font-size: 26rpx
    }

    .desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .yellow_tag {
      font-size: 20rpx;
      padding: 0 12rpx;
      background: #ff9900;
      border-radius: 6rpx;
      color: #fff;
    }
  }
}
</style>
